/*
步骤条样式
*/
@grayColor: #e9ecf0;
@greenColor: #90c31f;
@stepWidth: 100px;
.yby-steps-box.left {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    margin: 20px auto;
    * {
        box-sizing: border-box;
    }
    .step{
        align-items: center;
        justify-content: space-between;
        text-align: center;
        .circle-box{
            position: relative;
            width: 100%;
            height: 40px;
            padding-top: 12px;
            .circle-icon-box{
                position: absolute;
                z-index: 5;
                width: 100%;
                .circle{
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: @grayColor;
                    text-align: center;
                }
            }
            .step-line{
                position: absolute;
                width: 100%;
                top: 20px;
                font-size: 0;
                border: none;
                height: 2px;
                background-color: @grayColor;
            }
        }
        .tips-box{
            .title{
                display: inline-block;
                width: 100px;
            }
        }
    }
    .step.active{
        .circle-box{
            .circle{
                background-color: @greenColor;
                border: 2px solid @grayColor;
            }
        }
    }
    .step.first{
        .step-line{
            width: 50%;
            left: 50%;
        }
    }
    .step.last{
        .step-line{
            width: 50%;
            left: 0;
        }
    }
}
// bottom
.yby-steps-box.bottom {
    display: block;
    width: 100%;
    .step{
        width: 100%;
        height: 100px;
        .circle-box{
            float: left;
            width: @stepWidth;
            height: 100%;
            text-align: center;
            position: relative;
            .circle-icon-box{
                width: 100%;
                height: 16px;
                .circle{
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: @grayColor;
                    text-align: center;
                }
            }
            .step-line{
                position: absolute;
                bottom: 0;
                display: inline-block;
                width: 2px;
                font-size: 0;
                border: none;
                height: calc(~'100%' - 16px);
                background-color: @grayColor;
            }
        }
        .tips-box{
            float: right;
            width: calc(~'100%' - @stepWidth);
            .title-box{
                width: 100%;
                height: 30px;
                font-size: 13px;
                .title{
                    display: inline-block;
                    width: calc(~'100%' - 150px);
                    color: #333333;
                }
                .date{
                    float: right;
                    width: 150px;
                    text-align: right;
                    color: #999999;
                }
            }
            .msg{
                width: calc(~'100%' - 150px);
                font-size: 12px;
                line-height: 28px;
                color: #999999;
            }
        }
        .clear{
            clear: both;
        }
    }
    .step.active{
        .circle-box{
            .circle{
                background-color: @greenColor;
                border: 2px solid @grayColor;
            }
        }
    }
    .step.last{
        .step-line{
            display: none;
        }
    }
}